<template>
	<view>
			<!-- <uv-navbar title="员工列表" :autoBack="true" :placeholder="true" ></uv-navbar> -->
			<uv-sticky style="z-index: 10;background-color: #fff;top:0">	
				<div style="height:50rpx;background-color: #fff;"></div>
				<div class="header">
					<div class="back center" @click="back">
						<image src="/static/icon/back.png" mode="widthFix" class="w-20"></image>
					</div>
					{{$t('员工列表')}}
				</div>
				<view class="car_search">
					<view class="item" @click="openPickerSearchState">
						<view class="name">
							{{searchState||$t('当前状态')}}
						</view>
						<uv-icon name="arrow-down" color="#333" size="20rpx"></uv-icon>
					</view>
					<view class="item" @click="openPickerEmplType">
						<view class="name">
							{{emplType||$t('员工类别')}}
						</view>
						<uv-icon name="arrow-down" color="#333" size="20rpx"></uv-icon>
					</view>
				</view>
			</uv-sticky>
		
		<view class="empl_list" >
			<view class="empl_item" v-for="(item, index) in emplList" :key="index">
				<view class="flex-start">
					<image class="ico" @click="gotoInfo(item)" v-if="item.attachment" :src="getImageUrl(item.attachment.path)" mode="aspectFill"></image>
					<image class="ico" @click="gotoInfo(item)" v-if="!item.attachment" src="/static/img/ph_head.png" mode="aspectFill"></image>
				
					<view>
						<view class="name" @click="gotoInfo(item)" v-if="lang=='zh'">{{item.title}} <text v-if="item.type_info">【{{item.type_info.title}}】</text></view>
						<view class="name" @click="gotoInfo(item)" v-if="lang=='ru'">{{item.title_ru}} <text v-if="item.type_info">【{{item.type_info.title_ru}}】</text></view>
						<view class="h-35 w-110">
							<view class="org text" v-if="item.state == 1">{{$t('工作中')}}</view>
							<view class="green text" v-if="item.state == 2">{{$t('空闲')}}</view>
							<view class="gray text" v-if="item.state == 3">{{$t('停工')}}</view>
						</view>
					</view>
				</view>
			
				<view class="state" @click="openPicker(item,index)">
					<image src="../../static/icon/phoneIcon.png" mode="" class="w-50 h-50 mr-10"></image>
					<uv-icon name="arrow-right" color="#8C8C8C" size="24rpx"></uv-icon>
				</view>
			</view>
		</view>
		
		<!-- <view class="footer_none"></view> -->
		<!-- <view class="footer_btn">
			<navigator class="btn" url="/pages/employeeAdd/employeeAdd" hover-class="none">
				{{$t('添加员工')}}
			</navigator>
		</view> -->
		
		<uv-picker ref="picker" :columns="columns" keyName="label" @confirm="confirm"></uv-picker>
		
		<uv-picker ref="pickerSearchState" :columns="columns" keyName="label" @confirm="confirmSearchState"></uv-picker>
		
		<uv-picker ref="pickerEmplType" :columns="columnsEmplType" keyName="label" @confirm="confirmEmplType"></uv-picker>
		
	</view>
</template>

<script>
	import { my_colleague } from '@/api/basic.js'
	import { staff_type_select } from '@/api/basic.js'
	import { staff_state } from '@/api/basic.js'
	
	
	export default {
		data() {
			return {
				columns: [
					[
						{
							label: this.$t('请选择'),
							id: ''
						},
						{
							label: this.$t('工作中'),
							id: 1
						},
						{
							label: this.$t('空闲'),
							id: 2
						},
						{
							label: this.$t('停工'),
							id: 3
						}
					]
				],
				columnsEmplType: [
					[
						{
							label: '员工类别1',
							id: 1
						},
						{
							label: '员工类别2',
							id: 2
						},
						{
							label: '员工类别3',
							id: 3
						}
					]
				],
				emplList:[
					
				],
				stateIndex: 0,
				searchState: '',
				IMAGE_URL: 'https://gluz-oss.oss-cn-beijing.aliyuncs.com/',
				emplType: '',
				lang:'zh',
				columnsEmplState_id:'',
				columnsEmplType_id:'',
				find_item:{},
				bind_user_id: '',
				
			}
		},
		onLoad({bind_user_id}) {
			this.bind_user_id = bind_user_id;
			this.lang = uni.getStorageSync('lang')
			this.getList();
			this.staffTypeSelect();
		},
		methods: {
			back() {
				// uni.navigateBack()
				this.cback()
			},
			gotoInfo(item){
				uni.navigateTo({
					url: '/pages/employeeInfo/employeeInfo?json='+JSON.stringify(item)
				});
			},
			openPicker(item,index) {
				this.find_item = item
				this.$refs.picker.open();
				this.stateIndex = index				
			},
			confirm(e) {
				var val = e.value[0].id;
				this.emplList[this.stateIndex].state = e.value[0].id
				staff_state({id:this.find_item.id,state:e.value[0].id}).then(res => {})
			},
			openPickerSearchState() {
				this.$refs.pickerSearchState.open();
			},
			confirmSearchState(e){
				this.columnsEmplState_id = e.value[0].id
				this.searchState = e.value[0].label
				this.getList()
			},
			openPickerEmplType(index) {
				this.$refs.pickerEmplType.open();
			},
			confirmEmplType(e) {
				this.columnsEmplType_id = e.value[0].id
				this.emplType = e.value[0].label
				this.getList()
			},
			getList(){
				var that = this
				my_colleague({user_id: uni.getStorageSync('user_id'),bind_user_id: this.bind_user_id,'page':1,'limit':1000,'columnsEmplState_id':this.columnsEmplState_id,'columnsEmplType_id':this.columnsEmplType_id}).then(res => {
					that.emplList= res.data.data.data
				})
			},
			staffTypeSelect(){
				var that = this
				
				staff_type_select().then(res => {
					var list = res.data.data.data;
					var cou = list.length
					if(this.lang=='zh'){
						var arr = [{
									label: this.$t('请选择'),
									id: ''
								}]
					}else{
						var arr = [{
									label: 'Выбрать город',
									id: ''
								}]
					}
					for(var i=0;i<cou;i++){
						if(this.lang=='zh'){
							arr.push({
								id:list[i].id,
								label:list[i].title,
							})
						}else{
							arr.push({
								id:list[i].id,
								label:list[i].title_ru,
							})
						}
					}
					that.columnsEmplType= [arr]
				})
			}
		}
	}
</script>

<style lang="scss">
.empl_list{
	padding:0 24rpx;
	margin-top: 50rpx;
	position: relative;
	z-index: 1;
	.empl_item{
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: #fff;
		border-radius: 20rpx;
		margin-top: 20rpx;
		padding:20rpx 24rpx;
		.state{
			display: flex;
			align-items: center;
			padding-left:20rpx;
		}
			.text{
				font-size: 28rpx;
				line-height: 30rpx;
				padding-right: 6rpx;
				text-align: center;
				margin-top:15rpx;
				&.org{
					color: #F98A26;
					background-color: #FFECDB;
					border: 2rpx solid #F98A26;
					border-radius: 6rpx;
				}
				&.green{
					color: #06C36E;
					background-color: #E2FFF2;
					border: 2rpx solid #06C36E;
					border-radius: 6rpx;
				}
				&.gray{
					color: #8C8C8C;
					background-color: #F5F5F5;
					border: 2rpx solid #D8D8D8;
					border-radius: 6rpx;
				}
			}
		.ico{
			flex-shrink: 0;
			width: 90rpx;
			height: 90rpx;
			border-radius: 20rpx;
			margin-right: 24rpx;
		}
		.name{
			margin-right: auto;
			font-size: 32rpx;
			line-height: 40rpx;
			color: #333;
		}
	}
}
.car_search{
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: #fff;
	padding:14rpx 24rpx 24rpx;
	border-radius: 0 0 20rpx 20rpx;
	box-shadow: 0 6rpx 6rpx rgba(0, 0, 0, 0.04);
	.item{
		height: 80rpx;
		background: #F7F7F7;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding:0 20rpx;
		.name{
			font-size: 24rpx;
			line-height: 40rpx;
		}
		&:first-child{
			width: 180rpx;
			flex-shrink: 0;
			margin-right: 20rpx;
		}
		&:last-child{
			width: 100%;
		}
	}
}

.header {
	font-size: 34rpx;
	height: 100rpx;
	line-height: 100rpx;
	font-weight: bold;
	text-align: center;
	position: relative;
	padding-top: var(--status-bar-height);
}

.back {
	position: absolute;
	width: 70rpx;
	height: 70rpx;
	top: 18rpx;
}
	.navbar_right{
		color: #278AFF;
		font-size: 24rpx;
		line-height: 40rpx;
	}
	.footer_none{
		width: 100%;
		height: 210rpx;
	}
	.footer_btn{
		position: fixed;
		left:0;
		bottom: 0;
		right: 0;
		z-index: 9;
		background: #fff;
		padding:30rpx 30rpx 60rpx;
		box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.05);
		.btn{
			width: 100%;
			height: 90rpx;
			border-radius: 50rpx;
			background: linear-gradient(90deg, #278AFF 0%, #66D6E2 100%);
			color:#fff;
			text-align: center;
			line-height: 90rpx;
			font-size: 32rpx;
			font-weight: 600;
		}
	}
	.footer_btn1{
		position: fixed;
		left:0;
		bottom: 0;
		right: 0;
		z-index: 9;
		background: #fff;
		padding:30rpx 0 60rpx;
		box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.05);
		.btn_red{
			width: 100%;
			height: 110rpx;
			background: #FFB6B6;
			color:#FF1F1F;
			text-align: center;
			line-height: 110rpx;
			font-size: 32rpx;
		}
		.btn_gray{
			width: 100%;
			height: 110rpx;
			background: #C6C6C6;
			color:#fff;
			text-align: center;
			line-height: 110rpx;
			font-size: 32rpx;
		}
	}
	.footer_big_btn2{
		position: fixed;
		left:0;
		bottom: 0;
		right: 0;
		z-index: 9;
		background: #fff;
		padding:0 0 60rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.btn_red{
			flex-shrink: 0;
			width: 240rpx;
			height: 120rpx;
			line-height: 120rpx;
			text-align: center;
			color:#fff;
			background: #FF6456;
			font-size: 32rpx;
		}
		.btn_yellow{
			width: 100%;
			height: 120rpx;
			line-height: 120rpx;
			text-align: center;
			color:#fff;
			background: linear-gradient(90deg, #FF811E 0%, #FFBE7C 100%);
			font-size: 32rpx;
		}
	}
	.footer_btn2{
		position: fixed;
		left:0;
		bottom: 0;
		right: 0;
		z-index: 9;
		background: #fff;
		padding:30rpx 30rpx 60rpx;
		box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.05);
		display: flex;
		align-items: center;
		justify-content: space-between;
		
		.btn{
			width: 48%;
			height: 90rpx;
			border-radius: 50rpx;
			background: linear-gradient(90deg, #278AFF 0%, #66D6E2 100%);
			color:#fff;
			text-align: center;
			line-height: 90rpx;
			font-size: 32rpx;
			font-weight: 600;
		}
		.btn1{
			width: 48%;
			height: 90rpx;
			border-radius: 50rpx;
			background: #fff;
			color:#8C8C8C;
			text-align: center;
			line-height: 90rpx;
			font-size: 32rpx;
			border: 1rpx solid #8C8C8C;
		}
		.btn2{
			width: 48%;
			height: 90rpx;
			border-radius: 50rpx;
			background: #F7F7F7;
			color:#8C8C8C;
			text-align: center;
			line-height: 90rpx;
			font-size: 32rpx;
		}
	}
</style>
